<template>
	<view class="">
		<view class="emption-bg">
			<view class="emption-top">
				<view class="top-tips">
					<image src="../../static/emption/tips.png" mode=""></image>
				</view>
				<view class="focus-module" @click="gzshow()">
					<view class="follow-title">解忧alley</view>
					<view class="follow">
						点击关注
					</view>
				</view>
				<!-- 弹窗开始 -->
				<view >
					<popup custom-class="demo-popup" position="center" v-model="gzvisible">
						<view class="">
							<image class="popup-code" src="../../static/code.jpg" mode=""></image>
						</view>					
					</popup>
				</view>
				<view class="input">
					<view class="" style="width: 50rpx; height: 50rpx;">
						<image class="input-img" src="../../static/emption/input.png" mode=""></image>
					</view>
					<input v-model="filter" placeholder="请输入关键字" />
				</view>
				<view class="search" @click="select">搜索</view>
			</view>
			<view class="ranking-board">
				<view class="">
					<view class="tabswitch">
						<text class="tabswitch-title" :class="navIndex==1?'activite':''"
							@click="checkIndex(1)">女神榜</text>
						<text :class="navIndex==2?'activite':''" @click="checkIndex(2)">男神榜</text>
						<view class="u-tab-bar subscript" v-if="navIndex==1"></view>
						<view class="u-tab-bars subscript" v-if="navIndex==2"></view>
					</view>
				</view>
				<view class="tip">每时段<text class="highlight">TOP3</text>店员将获得下一时段的热门推荐</view>
				<view class="update-time">
					<image src="../../static/emption/time.png" mode=""></image>
					<view class="time">
						更新时间<text>{{Top3List.update_time}}</text>
					</view>
				</view>
				<view class="ranking-list">
					<view class="ranking-list-wrap" :class="index==0?'top2':index==1?'top1':'top3'" v-for="(item,index) in  Top3List" :key="index" v-if="index<3">
						<view class="ranking">
							<image v-if="index==0" src="/static/emption/top.2.png"
								style="border-radius: 0px;height: 172px;width: 100%;">
							</image>
							<image v-if="index==1" src="/static/emption/top.1.png"
								style="border-radius: 0px;height: 172px;width: 100%;">
							</image>
							<image v-if="index==2" src="/static/emption/top.3.png"
								style="border-radius: 0px;height: 172px;width: 100%;">
							</image>
						</view>
						<image :src="item.avatar" mode="" class="rankin-avatar">
						</image>
						<view class="ranking-nickname">
							{{item.nickname||"虚位以待"}}
						</view>
					</view>
				</view>
				<view class="sys-notice">
					<view class="broadcast">
						<image src="../../static/emption/broadcast.png" mode=""
							style="border-radius: 0px; width: 100%;height: 22px;line-height: 22px;"></image>
					</view>
					<view class="scroll_box">
						<swiper class="swiper" circular="true" vertical="true" display-multiple-items="1"
							:autoplay="autoplay" :interval="interval" :duration="duration">
							<swiper-item v-for="(item,index) in NewsList" :key="index">
								<view class="broadcast-content">{{item.noticeTitle}}</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>

			<view class="emption-title ">新人推荐</view>
			<scroll-view scroll-x="true">
				<view class="new-people-flex">
					<navigator url="" class="new-people" v-for="(item, index) in CreateList" :key="index">
						<image class="new-people-img" :src="item.avatar" mode=""></image>
						<view class="line">
							<view class="on-line-wrap"></view>
							<view class="on-line"></view>
						</view>
						<view class="new-people-name">{{item.nickname}}</view>
					</navigator>


				</view>
			</scroll-view>
			<view class="emption-flex">
				<view class="emption-title">全部店员</view>
				<view class="">
					<picker @change="bindPickerChangeGrade" :value="Grade" :range="array">
						<view class="selectitem" v-if="Grade!=0">{{ array[Grade] }}</view>
						<view class="selectitem" v-else>分类▼</view>
					</picker>
				</view>
				<view class="">
					<picker @change="bindPickerChangeSex" :value="Sex" :range="gender">
						<view class="selectitem" v-if="Sex!=0">{{ gender[Sex] }}</view>
						<view class="selectitem" v-else>性别▼</view>
					</picker>
				</view>
				<view class="">
					<picker @change="bindPickerChangetag" :value="tag" :range="gragde">
						<view class="selectitem" v-if="tag!=0">{{ gragde[tag] }}</view>
						<view class="selectitem" v-else>等级▼</view>
					</picker>
				</view>
			</view>
			<navigator :url="'/pages/details/details?id='+item.id" class="clerk" v-for="(item, index) in list" :key="index">
				<view class="clerk-img">
					<image :src="item.avatar"></image>
					<view class="on-lines"></view>
					<view class="audios">
						<view>

							<view :class="[item.sex!=1 ? 'wave-box sex-girl' : 'wave-box sex-boy']">
								<image class="play-img" src="/static/details/radio.png">
									<!---->
								</image>
								<!---->
								<view class="first waves"></view>
								<view class="second waves"></view>
								<view class="third waves"></view>
								<view class="first waves"></view>
								<view class="second waves"></view>
								<view class="third waves"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="clerk-right-info">
					<view class="clerk-info-flex">
						<view class="clerk-right-flex">

							<view class="clerk-name">{{item.nickname}}</view>
							<view
								:class="[item.sex!=1 ? 'emption-grade-flex clerk-girl' : 'emption-grade-flex clerk-boy']">
								<view class="ico-img">
									<image src="../../static/ico/boy.png" mode="" v-if="item.sex==1"></image>
									<image src="../../static/ico/girl.png" mode="" v-if="item.sex==2"></image>
								</view>
								<text class="emption-age">{{item.age}}岁</text>
							</view>
						</view>
						<view :class="[item.sex!=1 ? 'location clerk-girl' : 'location clerk-boy']">
							<image src="../../static/emption/location.png" mode=""></image>
							<text>{{item.province}}</text>
						</view>
					</view>
					<view class="emption-category">
						<view
							:class="[item.sex!=1 ? 'emption-grade-flex clerk-grade-girl' : 'emption-grade-flex clerk-grade-boy']">
							<view class="ico-img">
								<image src="../../static/ico/grade2.png" mode=""></image>
							</view>
							<text class="emption-grade">{{item.grade}}</text>
						</view>
						<view class="emption-service">
							<text>连麦</text>
							<text>|</text>
							<text>点歌</text>
							<text>|</text>
							<text>哄睡</text>
							<text>|</text>
							<text>叫醒</text>
							<text>|</text>
							<text>手游</text>
						</view>
					</view>
					<view class="signature-wrap">
						<image src="../../static/details/Signature.png" mode=""></image>
						<view class="signature">{{item.intro}}</view>
					</view>
				</view>
			</navigator>


			<view class="suspension" @click="show()">
				<image class="suspension-img" src="../../static/emption/read.png" mode=""></image>
				<view class="suspension-title">新人必看</view>
			</view>
			<view class="">
				<popup custom-class="demo-popup" position="center" v-model="visible">
					<view class="popup">
						<view class="popup-content">
							<view class="popup-content-title">绿色聊天 拒绝低俗</view>
							<view class="">
								1、本店倡导绿色健康服务，请严格遵守法律法规，共同构建健康有序，文明和谐的网络生态环境！本店倡导绿色健康服务，请严格遵守法律法规，共同构建健康有序，文明和谐的网络生态环境！
								本店倡导绿色健康服务，请严格遵守法律法规，共同构建健康有序，文明和谐的网络生态环境！
								本店倡导绿色健康服务，请严格遵守法律法规，共同构建健康有序，文明和谐的网络生态环境！
								本店倡导绿色健康服务，请严格遵守法律法规，共同构建健康有序，文明和谐的网络生态环境！
								本店倡导绿色健康服务，请严格遵守法律法规，共同构建健康有序，文明和谐的网络生态环境！
								本店倡导绿色健康服务，请严格遵守法律法规，共同构建健康有序，文明和谐的网络生态环境！
								本店倡导绿色健康服务，请严格遵守法律法规，共同构建健康有序，文明和谐的网络生态环境！
							</view>
							<view class="">
								2、本店倡导绿色健康服务，请严格遵守法律法规，共同构建健康有序，文明和谐的网络生态环境！
							</view>
							<view class="">
								3、严禁未成年人下单和申请电员！
							</view>
						</view>
						<view class="know-wrap">
							<view class="know" @click="hide()">我已知晓</view>
						</view>
					</view>
				</popup>
			</view>
			<view class="load-more" v-if="moreList">
				——<text>加载更多</text>——
			</view>
			<view class="load-more" v-else>
				——<text>没有更多了</text>——
			</view>
		</view>
	</view>
</template>

<script>
	import popup from '../../components/s-popup/index.vue'
	export default {
		components: {
			popup
		},
		data() {
			return {
				gzvisible:false,
				filter:'',
				autoplay: true,
				interval: 3000,
				duration: 1000,
				// scale: 1,
				// startData: {
				// 	clientX: ''
				// },
				array: [ '全部', '连麦', '端游', '点歌', '哄睡', '叫醒', '手游'],
				Grade: 0,
				gender: [ '全部', '男', '女'],
				Sex: 0,
				gragde: [ '全部', '普通', '金牌', '镇店', '神级', '首席'],
				tag: 0,
				visible: false,
				
				NewsList:[],
				Top3List:[],
				CreateList: [],
				list: [],
				moreList:true,
				page: 1,
				navIndex: 1,
			}
		},
		// created() {
		// 	this.getTop3BySex()
		// 	this.Create();
		// 	this.lists();
		// },
		onShow() {
			this.getTop3BySex()
			this.getNews()
			this.Create();
			this.lists();
		},
		onReachBottom() {
			if(this.moreList){
				this.page = this.page + 1;
				this.lists(this.page)
			}
		},

		methods: {
			onScale() {

			},
			gzshow(){
				this.gzvisible=!this.gzvisible
			},
			select(){
				this.lists()
			},
			getNews(){
				this.$http.getReq("/api/index/dynamic",).then(res => {
					this.NewsList = res.data;
				});
			},
			//最热门三人
			getTop3BySex(){
				this.$http.getReq("/api/order/getTop3BySex",{sex:this.navIndex} ).then(res => {
					this.Top3List = res.data;
				});
			},
			//获取新人
			Create() {
				this.$http.getReq("/api/order/getByCreateTime", ).then(res => {
					this.CreateList = res.data;

				});
			},
			//获取全部店员
			lists(e) {
				this.$http.getReq("/api/order/getList", {
					pageNum: this.page,
					pageSize: '',
					filter:this.filter,
					grade: this.Grade,
					sex: this.Sex,
					tag: this.tag
				}).then(res => {
					if(res.data.data.length!=0){
						if(e){
							this.list = this.list.concat(res.data.data);
						}else{
							console.log(e,"kong")
							this.list=res.data.data
						}
					}else{
						this.page--
						this.list=res.data.data
						this.moreList=false
					}
				});
			},

			bindPickerChangeGrade: function(e) {
				this.page=0
				this.Grade = e.detail.value
				this.lists()
			},
			bindPickerChangeSex: function(e) {
				this.page=0
				this.Sex = e.detail.value
				this.lists()
			},
			bindPickerChangetag: function(e) {
				this.page=0
				this.tag = e.detail.value
				this.lists()
			},
			getDate(type) {
				const date = new Date();
			},
			// 弹窗
			show() {
				this.visible = true;
			},
			hide() {
				this.visible = false
			},
			checkIndex(index) {
				this.navIndex = index;
				this.getTop3BySex()
			}
		}
	}
</script>

<style>
	.emption-bg {
		background: #FBF5F5;
		padding: 12rpx 0;
	}

	.emption-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 32rpx;
	}

	.top-tips {
		width: 50rpx;
		height: 50rpx;
		background: #f3f4f6;
		border-radius: 50%;
		padding: 20rpx;
	}

	.top-tips image {
		width: 100%;
		height: 100%;
	}

	.follow-title {
		font-size: 26rpx;
		font-weight: 700;
		margin-bottom: 8rpx;
	}

	.follow {
		background: linear-gradient(121deg, #fe7b7e, #ff2e34);
		border-radius: 25rpx;
		padding: 6rpx 20rpx;
		color: #ffffff;
		font-size: 24rpx;
	}

	.input {
		display: flex;
		align-items: center;
		background: #F2F2F2;
		border-radius: 40rpx;
		padding: 10rpx;
		width: 350rpx;
	}

	.input-img {
		width: 50rpx;
		height: 50rpx;
		margin: 0 5rpx;
	}

	.search {
		font-size: 30rpx;
	}

	.ranking-board {
		height: 720rpx;
		margin: 20rpx 22rpx;
		/* background: url(/static/emption/emption_bg.png); */
		background: url(../../static/emption/emption_bg.png);
		background-size: 100% 100%;
		background-clip: initial;
	}

	.tabswitch {
		color: #ffffff;
		text-align: center;
		font-size: 38rpx;
		padding-top: 20rpx;
		position: relative;
		width: 50%;
		margin: 0 auto;
	}

	.tabswitch .tabswitch-title {
		margin-right: 30rpx;
	}

	.activite {
		font-weight: bold;
	}

	/* .activites{
	right:-78rpx;
} */
	.u-tab-bar {
		position: absolute;
		bottom: -18rpx;
		left: 78rpx;
	}

	.u-tab-bars {
		position: absolute;
		bottom: -18rpx;
		right: 78rpx;
	}

	.subscript {
		width: 60rpx;
		/* transform: translate(42.8359px, -100%); */
		transition-duration: 0.5s;
		background: linear-gradient(126deg, rgb(255, 0, 178) 0%, rgb(128, 0, 188) 100%);
		height: 10rpx;
		opacity: 1;
		border-radius: 6rpx;
	}

	.tip {
		text-align: center;
		color: #ffffff;
		font-size: 18rpx;
		opacity: 0.8;
		margin-top: 36rpx;
	}

	.highlight {
		color: #ff2e34;
		font-size: 20rpx;
		font-weight: 700;
	}

	.update-time {
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		width: 45%;
		margin: 25rpx auto 0;
		padding: 2rpx;
		padding-left: 20rpx;
		background: linear-gradient(121deg, rgb(254, 123, 126, 0.7), rgb(255, 46, 52, 0.8));

	}

	.update-time image {
		width: 38rpx;
		height: 38rpx;
	}

	.update-time .time {
		padding: 10rpx;
		color: #ffffff;
		text-align: center;
		font-size: 20rpx;
	}

	.ranking-list {
		/* display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 16rpx; */
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 16rpx;
	}

	.ranking-list-wrap {
		height: 173px;
		align-items: flex-end;
	}

	/* .ranking {
		width: 198rpx;
		height: 324rpx;
		border-radius: 0px;
		overflow: visible;
		opacity: 1;
		transition: opacity 0.5s ease-in-out 0s;
		background-color: transparent;

	} */
	.ranking {
		width: 186rpx;
		height: 162px;
		border-radius: 0px;
		overflow: visible;
		opacity: 1;
		transition: opacity 0.5s ease-in-out 0s;
		background-color: transparent;
	}

	image>img {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.rankin-avatar {
		width: 74rpx;
		height: 39px;
		margin-left: 17px;
		display: block;
		border-radius: 8px;
		z-index: 2;
	}

	.top2 .rankin-avatar {
		margin-top: -126px;
	}

	.top1 .rankin-avatar {
		margin-top: -151px;
	}

	.top3 .rankin-avatar {
		margin-top: -104px;
	}

	.ranking-nickname {
		display: block;
		/* z-index: 999 !important; */
		position: relative;
		font-size: 16rpx;
		font-family: FZLanTingHeiS-R-GB;
		font-weight: 700;
		color: #ffede7;
		width: 120rpx;
		margin-left: 32rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}

	.top2 .ranking-nickname {
		margin-top: 57px;
	}

	.top1 .ranking-nickname {
		margin-top: 83px;
	}

	.top3 .ranking-nickname {
		margin-top: 36px;
	}

	.sys-notice {
		margin: 20rpx 50rpx;
		background: linear-gradient(108deg, #f5e6e8, #b2cad9);
		/* width: 628rpx; */
		height: 76rpx;
		border-radius: 39rpx;
		box-shadow: 0 10rpx 8rpx 2rpx rgba(245, 230, 232, .35);
		padding: 0 14rpx;
		/* margin: 2px auto; */
		opacity: .8;
		display: flex;
		align-items: center;
	}

	.broadcast {
		width: 48rpx;
		height: 48rpx;
		border-radius: 0px;
		overflow: visible;
		opacity: 1;
		transition: opacity 0.5s ease-in-out 0s;
		background-color: transparent;
	}

	.scroll_box {
		margin: 30rpx;
		width: 100%;
	}

	.swiper {
		height: 30rpx;
		color: #DC6E70;
		font-size: 25rpx;
	}

	.broadcast-content {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.emption-title {
		width: 198rpx;
		height: 60rpx;
		padding: 6rpx 14rpx;
		font-size: 40rpx;
		margin: 38rpx 22rpx;
		color: #232323;
		font-weight: 700;
		background-image: url(../../static/emption/title.pg.png);
		background-size: 100% 100%;
	}

	/* 新人推荐内容 开始 */
	.new-people-flex {
		display: flex;
		margin: 0 22rpx;
	}

	.new-people {
		width: 170rpx;
		height: auto;
		background-color: #F7F7F7;
		border: 1px solid #f4f4f4;
		border-radius: 20rpx;
		/* overflow: hidden; */
		box-shadow: 0 12rpx 10rpx 0 rgb(0 0 0 / 4%);
		margin-right: 20rpx;
	}

	.new-people-img {
		width: 170rpx;
		height: 170rpx;
		border-radius: 20rpx;
	}

	.line {
		position: relative;
		top: -14rpx;
		right: 8rpx;
	}

	.on-line-wrap {
		float: right;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background: #FFFFFF;
		margin-top: -144rpx;
		margin-right: 8rpx;
		position: relative;

	}

	.on-line {
		float: right;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background: #62E7A5;
		margin-top: -140rpx;
		margin-right: 10rpx;
		position: relative;
	}

	.new-people-name {
		font-size: 30rpx;
		margin: 14rpx 0;
	}

	/* 新人推荐内容 结束 */
	.emption-flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-right: 50rpx;
		/* margin-top: 150rpx; */
	}

	.selectitem {
		width: 57px;
		height: 25px;
		background: #CDDCE5;
		opacity: .8;
		border-radius: 13px;
		line-height: 25px;
		text-align: center;
		font-size: 28rpx;
	}

	.on-lines {
		float: right;
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		background: #62E7A5;
		margin-top: -156rpx;
		margin-right: 14rpx;
		position: relative;
	}

	.audios {
		position: absolute;
		bottom: 20rpx;
		left: 18rpx;
	}

	.sex-girl.wave-box {
		background-color: #e87578;
	}

	.sex-boy.wave-box {
		background-color: #5D9FF2;
	}

	.wave-box {
		z-index: 999;
		margin-left: 20rpx;
		/* width: 140rpx; */
		/* height: 13px; */
		overflow: hidden;
		/* margin: 20rpx 0rpx; */
		display: flex;
		justify-content: center;
		align-items: center;
		/* padding: 10rpx 12rpx 10rpx 2rpx; */
		padding: 10rpx 12rpx;
		border-radius: 170rpx;
	}

	.wave-box .play-img {
		width: 28rpx;
		height: 28rpx;
	}

	.wave-box .first {
		height: 14rpx;
	}

	.wave-box .second {
		height: 26rpx;
	}

	.wave-box .third {
		height: 18rpx;
	}

	.sex-girl .waves {
		background-color: #fecdce;
	}

	.sex-boy .waves {
		background-color: #B3C8DE;
	}

	.waves {
		width: 8rpx;
		height: 100%;
		margin-left: 10rpx;
		border-radius: 94rpx;
		vertical-align: middle;
		display: inline-block;
	}




	.clerk {
		margin: 20rpx 22rpx;
		background: #ffffff;
		display: flex;
		/* border: 1px solid #232323; */
		padding: 28rpx 20rpx 35rpx;
		position: relative;
		border-radius: 25rpx;
	}

	.clerk-img {
		margin-right: 15rpx;
	}

	.clerk-img image {
		border-radius: 25rpx;
		width: 170rpx;
		height: 170rpx;
	}

	.clerk-right-info {
		width: 100%;
	}

	.clerk-info-flex {
		display: flex;
		justify-content: space-between;
	}

	.clerk-right-flex {
		display: flex;
	}

	.clerk-name {
		font-size: 30rpx;
		font-weight: 700;
		margin-right: 20rpx;
	}

	.emption-grade-flex {
		display: flex;
		align-items: center;
		/* width: 26%; */
		border-radius: 25rpx;
	}

	.ico-img {
		width: 42rpx;
		height: 42rpx;
		margin-right: 4rpx;
	}

	.ico-img image {
		width: 100%;
		height: 100%;
	}

	.emption-age {
		color: #ffffff;
		font-size: 20rpx;
		/* line-height: 55rpx; */
		margin-right: 16rpx;
	}

	.location {
		background: #CDDBE5;
		display: flex;
		border-radius: 50rpx;
		align-items: center;
		padding: 1rpx 10rpx;
	}

	.location image {
		width: 30rpx;
		height: 30rpx;
	}

	.location text {
		font-size: 24rpx;
		color: #ffffff;
		margin-right: 10rpx;
	}

	.emption-category {
		display: flex;
		align-items: center;
		margin: 16rpx 0;
		position: relative;
		z-index: 1;
	}

	.clerk-grade-girl {
		background: #ED5859;
	}

	.clerk-grade-boy {
		background: #5D9FF2;
	}

	.clerk-boy {
		background: #CDDBE5;
	}

	.clerk-girl {
		background: #F0797A;
	}

	.emption-grade {
		margin-right: 20rpx;
		color: #ffffff;
		font-size: 28rpx;
	}

	.emption-service {
		background-color: #F5E6E8;
		padding-right: 17rpx;
		padding-left: 40rpx;
		margin-left: -30rpx;
		line-height: 35rpx;
		border-top-right-radius: 188rpx;
		border-bottom-right-radius: 188rpx;
		position: relative;
		z-index: -1;
	}

	.emption-service text {
		color: #FF9194;
		margin-right: 5rpx;
		font-size: 15rpx;
	}

	.signature-wrap {
		display: flex;
		align-items: center;
	}

	.signature-wrap image {
		width: 30rpx;
		height: 30rpx;
	}

	.signature {
		font-size: 24rpx;
		color: #545A7E;
	}

	/* 悬浮 */
	.suspension {
		position: fixed;
		right: 1rpx;
		bottom: 418rpx;
		color: grey;
		align-items: center;
		font-size: 24rpx;
		z-index: 1;
	}

	.suspension-img {
		width: 84rpx;
		height: 84rpx;
		background-color: #fff;
		border-radius: 188rpx;
	}

	.suspension-title {
		background-color: #fff;
	}

	/* 新人必看弹出内容 开始 */
	.popup {
		width: 600rpx;
		height: 500rpx;
		padding: 30rpx;

	}

	.popup-content {
		height: 420rpx;
		overflow-y: scroll;
		font-size: 30rpx;
	}

	.popup-content::-webkit-scrollbar {
		display: none;
	}

	.popup-content-title {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.know-wrap {
		padding: 25rpx 0;
	}

	.know {
		text-align: center;
		border: 1rpx solid #AFB0B3;
		border-radius: 12rpx;
		color: #727477;
		padding: 8rpx 10rpx;
		margin: 0 auto;
		width: 150rpx;
		font-size: 30rpx;

	}

	/* 新人必看弹出内容 结束 */

	.load-more {
		text-align: center;
		color: #D8D8D8;
		/* margin-bottom: 20rpx; */

	}

	.load-more text {
		color: #606266;
		font-size: 28rpx;
		font-weight: 700;
		margin: 0 20rpx;
	}
	
	
	.popup-code{
		width: 400rpx;
		height: 400rpx;
		padding: 20rpx;
	}
</style>
